<template>
  <div>
    <!-- <input type="text" @change="handleChange($event)" /> -->
    <input ref="inputRef" type="text" @change="handleChange" />

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
/**
 * 1. 可以通过模板中定义的$event 获取事件对象的类型
 */
function handleChange(event:Event) {
  // `event` implicitly has `any` type
  console.log('事件源-输入框的 dom 对象：', event.target)
  //  2. 需要给event.target 通过类型断言指定类型=》html 元素类型获取 document.querySelector('元素名').__proto__
  console.log('获取输入框输入的值：', (event.target as HTMLInputElement).value)
}

// 模板 ref 使用
const inputRef = ref<HTMLInputElement>()
console.log('输入框 dom1:',  inputRef.value)
// inputRef.value.focus()
onMounted(()=>{
  console.log('输入框 dom2:',  inputRef.value)
  // 方式 1：
  // if(inputRef.value) {
  //   inputRef.value.focus()
  // }
  // inputRef.value && inputRef.value.focus()
  // 方式 2：
  // ?是就是js语法,叫可选链操作符（推荐）
  inputRef.value?.focus()
  // 方式 3：!是 ts 语法，叫非空断言=》作用：去除类型中 undefined null
  // 注意：非空断言存在类型风险，不能确保代码执行健壮性
  // let test1:number | undefined | null
  // let test2 = test1!
  // test2 = 1
  // console.log(test2)
  // inputRef.value!.focus()
})
</script>

<style scoped>

</style>